import React, {memo} from 'react';
import PagesStructureStyle from "./PagesStructureStyle";

/**
 * 时间: 2024年1月26日 16点23分
 * 复合页面架构
 * 主要用于专辑 歌单 歌曲的详情页架构
 * 所以该组件也是一个插槽组件
 * props说明
 *  imgSlot
 */
type Props = {
  coverSlot?:JSX.Element,
  infoSlot?: JSX.Element,
  contentSlot?:JSX.Element,
  sidebarSlot?:JSX.Element,
  id:number,
};

export default memo(function PagesStructure(props: Props) {
  return (
    <PagesStructureStyle>
      <div className="page-header-box">
        <div className="page-header-user-cover">
          {props.coverSlot}
        </div>
        <div className="page-header-info-box">
          {props.infoSlot}
        </div>
      </div>
      <div className="page-content-box">
        <div className="page-content-left-box">
          {props.contentSlot}
        </div>
        {
          props.sidebarSlot?props.sidebarSlot:""
        }
        {/*<div className="page-content-right-box">*/}
        {/*  {props.sidebarSlot?props.sidebarSlot:""}*/}
        {/*</div>*/}
      </div>
    </PagesStructureStyle>
  );
});
